import React, { useEffect, useState, useLayoutEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { Badge, Descriptions, Card } from 'antd'
import { reqGetHospitalShow } from '@api/hospital/hospitalList'
import { Ihospital } from '@api/hospital/hospitalList/model/hospitalListTypes'
import { DEFAULT_MAX_VERSION } from 'tls'
export default function HospitalListShow() {
  const id = useLocation().state as string

  const [hospital, setHospital] = useState<Ihospital>({})

  useEffect(() => {
    async function fetch() {
      const result = await reqGetHospitalShow(id)
      setHospital(result)
    }
    fetch()
  }, [])
  return (
    <Card>
      {/* column={2} 表示一行2列 */}
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {/* es10新增语法,可选链 */}
          {hospital.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            src={`data:image/jpeg;base64,` + hospital.hospital?.logoData}
            alt=""
            width={80}
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {hospital.hospital?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hospital.hospital?.param.fullAddress}
        </Descriptions.Item>
        {/* span={2} 表示这一列要占2列的位置 */}
        <Descriptions.Item label="乘车路线" span={2}>
          {hospital.hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {hospital.hospital?.intro}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions title="预约规则信息" bordered column={2}>
        <Descriptions.Item label="预约周期">
          {/* es10新增语法,可选链 */}
          {hospital.bookingRule?.cycle}天
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {hospital.bookingRule?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hospital.bookingRule?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {hospital.bookingRule?.quitTime}
        </Descriptions.Item>
        {/* span={2} 表示这一列要占2列的位置 */}
        <Descriptions.Item label="预约规则" span={2}>
          {hospital.bookingRule?.rule.map((item, index) => {
            return (
              <div key={index}>
                {index + 1}.{item}
              </div>
            )
          })}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  )
}
